<template>
  <div>
    <el-card>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleupdelete">确 定</el-button>
  </span>
      </el-dialog>
      <el-form ref="form" :model="formData" size="medium" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="监督机构" prop="orgName">
              <el-select
                v-model="formData.orgId"
                filterable
                clearable
                style="margin-left: 20px;"
                placeholder="请选择">
                <!--              <el-input v-model="formData.orgName" clearable :style="{width: '90%'}"></el-input>-->
                <el-option
                  v-for="item in forname"
                  :key="item.id"
                  :label="item.orgName"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="科室名称" prop="divName">
              <el-input v-model="formData.divName" clearable :style="{width: '50%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="success" @click="inquire(1)">检索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button type="success" @click="$router.push('/org/sectionadd')">创建科室</el-button>
        </el-col>
      </el-row>
      <el-row>

      </el-row>
      <el-table :data="sectionlist"
                border style="width: 100%">
        <el-table-column
          fixed
          prop="orgCode"
          label="机构编码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="orgName"
          label="机构名称"
          width="160">
        </el-table-column>
        <el-table-column
          prop="exeType"
          label="行政类别"
          width="100">
        </el-table-column>
        <el-table-column
          prop="divCode"
          label="科室编码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="divName"
          label="科室名称"
          width="130">
        </el-table-column>
        <el-table-column
          prop="dutyTel"
          label="电话号码"
          width="140">
        </el-table-column>
        <el-table-column
          prop="fax"
          label="传真号码"
          width="140">
        </el-table-column>
        <el-table-column
          prop="divRoomNo"
          label="门号"
          width="80">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <!--slot-scope="scope" <el-button @click="handleClick(scope.row)" type="text" size="small">查看  </el-button>| -->
            <el-button  type="primary" round size="small" @click="handleupdate(scope.row.id)">修改</el-button>
            <el-button  type="success" round size="small" @click="handledelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" class="page-row" v-show="page_show">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import {post} from "@/utils/api";

  export default {
    data() {
      return {
        dialogVisible: false,
        currentPage:1,
        total:0  ,//一共有多少条数据
        pages:1,
        pagesize:6, //每页显示多少条数据  页数等于  total/pagesize
        sectionlist:[],
        page_show:true,
        formData:{},
        forname:[],
        orgid:0,
        sectionid:Number
      }
    },
    async created() {
      let res = await post("org/getallorg")
      // console.log(res)
      this.forname= res
      // console.log(this.forname)
      this.getListByPage(1)

    },
    methods: {
      handledelete(id){
        this.dialogVisible=true
        this.sectionid = id
      },
      async handleupdelete(id){
        await post("section/deletebyid",{id:this.sectionid})
        this.dialogVisible =false
        this.$router.go()
      },
      handleupdate(id){
        this.$router.push({name:"sectionupdateandclick", query: {id:id}})
        console.log(id);

      },
      //按条件查询
      async inquire(p){
        console.log(this.formData)
        let res = await post("section/getbyorgidanddivname",{page:p,count:this.pagesize,...this.formData})
        console.log(res);
        this.sectionlist = res.records
        this.total = res.total
      },
      //分页查询
      async getListByPage(page){
        let res = await post("section/getorgandsection",{page: page, count: this.pagesize})
        console.log(res)
        //处理信息
        this.page_show = true
        this.sectionlist = res.records
        console.log(this.sectionlist)
        this.total = res.total
        console.log(res.total)

      },
      handleCurrentChange(currentPage){
        //当前页码改变时触发
        // console.log(currentPage)
        this.currentPage = currentPage
        this.inquire(currentPage)
      },
    }
  }
</script>
<style></style>
